<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebM Dashboard</title>
  <link href="/css/bootstrap.css" rel="stylesheet">
  <link href="/css/bootstrap-responsive.css" rel="stylesheet">
  <link href="/css/dashboard.css" rel="stylesheet">
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
  </style>
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- The majority of our javascript -->
  <!-- LQ: Will jstree work with a newer jQuery? Seems so. -->
  <!-- script type="text/javascript" src="/js/jstree/_lib/jquery.js"></script -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
  <script type="text/javascript" src="/js/jstree/jquery.jstree.js"></script>
  <link rel="stylesheet" type="text/css" href="/js/jquery-ui/css/custom-theme/jquery-ui-1.8.23.custom.css" />
  <script type="text/javascript" src="/js/jquery-ui/js/jquery-ui-1.8.21.custom.min.js"></script>
  <script type="text/javascript" src="/js/json2.js"></script>
  <!-- A file with useful js functions -->
  <script type="text/javascript" src="/js/utils.js"></script>
  <script type="text/javascript" src="/js/chartutils.js"></script>

<script type="text/javascript">

var MetricState = new Array();
var ConfigState = new Array();
var FileState = new Array();
var CommitState = new Array();
var FileTableState = new Array();
var openList = new Array();

{% if development %}
var development = true;
{% else %}
var development = false;
{% endif %}

var init = true;
var tableinit = true;

// We build up our State lists (if applicable) from our template values.
{% if metrics %}
MetricState = '{{metrics}}'.split(',');
{% endif %}

{% if configs %}
ConfigState = '{{configs}}'.split(',');
{% endif %}

{% if filesets %}
FileState = '{{filesets}}'.split(',');
{% endif %}

{% if commits %}
CommitState = '{{commits}}'.split(',');
{% endif %}

{% if filenames %}
FileTableState = '{{filenames}}'.split(',');
{% endif %}

{% if opentrees %}
openList = '{{opentrees}}'.split(',');
{% endif %}

// WE SET GLOBAL CHART OPTIONS
var chartOptions ={chartArea: {height: "70%", width: "70%"}};

</script>
<script type="text/javascript" src="/js/treehandler.js"></script>

<!-- the AJAX API for google charts -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1.0', {'packages':['corechart', 'table']});

function ChartFiller(baseline) {
  var dist_responses = new Array();
  var bar_responses = new Array();
  var time_responses = new Array();

  var queryNum = MetricState.length * ConfigState.length *
                 FileTableState.length * CommitState.length;

  // A loading image
  $('#chartdiv').html("<img src='/images/ajax-loader.gif' alt='Loading...' style='display:block; margin:auto;'>");

  // Wait until all data is fetched to generate graphs
  $(document).ajaxStop(function() {
    $(this).unbind("ajaxStop");
    if (dist_responses.length > 0) {
      drawChart(dist_responses, 'chartdiv', null, 'tabs2', 'configInfo', 'status');
    }
    else {
      $('#chartdiv').html("");
      $('#tabs2').html("");
    }

    if (bar_responses.length > 0) {
      drawChart2(bar_responses, 'chartdiv', null, 'tabs2', 'configInfo', 'status');
    }

    if (time_responses.length > 0) {
      drawTimeSeriesChart(time_responses, 'chartdiv', null, 'tabs2', 'configInfo', 'status');
    }

  });

  //var files = FileState.filter(removeParents);
  var files = FileTableState;

  // Add the baseline to the list of commits, if one is set
  var commits = Array();
  if (baseline)
    commits.push(baseline);
  commits = commits.concat(CommitState.filter(removeParents));

  // Ew, quadruple nested loop
  for (var i = 0; i < MetricState.length; i++) {
    // one series per commit (we exclude cases of time series)
    if (bar_responses.length == 0 && queryNum && !is_distortion(MetricState[i]) && !(commits[0][0] === "~"))
      for (var t = 0; t < commits.length; t++)
        bar_responses[t] = new Array();

    for (var j = 0; j < ConfigState.length; j++) {
      for (var k = 0; k < files.length; k++) {
        if (files[k].slice(0, 8) === 'OVERALL:') {
          if (queryNum == 1) {
            $('#chartdiv').html("Please select a file (or files) to view graph.");
            $('#status').html("");
            $('#tabs2').html("");
          }
          $("#commitInfo").dialog('close');
          $("#configInfo").dialog('close');
          continue;
        }

        for (var t = 0; t < commits.length; t++) {
          // We put together a url
          var metric = MetricState[i];
          var config = ConfigState[j];
          var file = files[k];
          var commit = commits[t];
          metricurl = "/metric-data/" + metric + "/" + config + "/" + file + "/" + commit

          // pretty-up commit hash
          if (baseline && t == 0)
            commit = commit.slice(0,9) + " (Baseline)";
          else
            commit = commit.slice(0,9);

          // Build a more readable version of the series name
          var series_name = []
          if (MetricState.length > 1) {
            series_name.push(metric);
          }
          if (ConfigState.length > 1) {
            series_name.push(config);
          }

          if (commit[0] === "~") {
            if (files.length > 1) {
              series_name.push(file);
            }
            series_name.push(commit);
            series_name = {label: series_name.join(" "), commit: commit};
            FetchMetric(metricurl, series_name, time_responses);
          }
          else if (is_distortion(metric)) {
            if (files.length > 1) {
              series_name.push(file);
            }
            series_name.push(commit);
            series_name = {label: series_name.join(" "), commit: commit};
            FetchMetric(metricurl, series_name, dist_responses);
          } else {
            if (series_name.length == 0 || files.length > 1) {
              series_name.push(file);
            }
            series_name = {label: series_name.join(" "), commit: commit};
            FetchMetric(metricurl, series_name, bar_responses[t]);
          }
        }
      }
    }
  }
}


</script>

<script>
$(function() {
  $("#helpdialog").dialog({ autoOpen: false, width: 800 });
  $("#helpbutton").bind('click', help);

  $("#sharedialog").dialog({ autoOpen: false, width: 800 });
  $("#sharebutton").bind('click', share);

  $("#commitInfo").dialog({ autoOpen: false, width: 800, position: ['right', 60]  });
  $("#configInfo").dialog({ autoOpen: false, width: 800, position: ['right', 60]  });
  $('#container').hide();

  // This hides the whitespace used for storing the chart
  $(document).click(function() {
    if ($('#chartdiv').is(':empty')){
      $('#container').hide();
    }
    else {
      $('#container').show();
    }
  });

});

function help() {
  $("#helpdialog").dialog('open');
}

function share() {
  // This function creates and displays a custom url for accessing the current
  // dashboard view
  var url;

  if (development)
    url = "localhost:8080/explore/";
  else
    url = "http://dashboard.webmproject.org/explore/";

  var metrics = MetricState.join(",");
  var configs = ConfigState.join(",");
  var filesets = FileState.join(",");
  var commits = CommitState.filter(removeParents).join(",");
  var filenames = FileTableState.join(",");
  var opentrees = openList.join(',');
  url = url + metrics + "/" + configs + "/" + filesets + "/" + commits +
        "/" + filenames + "/" + opentrees;

  var hyperurl = '<a href="' + url + '" target="_blank">' + url + "</a>";

  $('#shareurl').html(hyperurl);
  $("#sharedialog").dialog('open');
}

</script>

  <link rel="shortcut icon" href="/images/webm-48px.png">
  <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">

  <script type='text/javascript'>
     $(document).ready(function () {
       if ($("[rel=popover]").length) {
       $("[rel=popover]").popover();
     }
   });
  </script>
</head>
<body>

  <header>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/">WebM Dashboard</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              {% if user %}
              Logged in as {{ user.nickname }} [<a href="{{ logout_url }}">Sign Out</a>]
              {% else %}
              <a href="{{ login_url }}">Sign In</a>
              {% endif %}
            </p>
            <ul class="nav">
              <li><a href="/explore">Explorer View</a></li>
              <li><a href="/commit_viewer/">Commit View</a></li>
              <li><a href="#helpModal" data-toggle="modal">Help</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="modal hide fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="helpModalLabel">About this page</h3>
      </div>
      <div class="modal-body">
        <ul>
          <li>To view a graph of performance data, please select some metrics, configurations, filesets and patch sets. </li>
          <li> The page will automatically update to reflect what data is available.</li>
          <li> Then in the area below, pick a filename to view the graph.</li>
          <li> Multiple filenames can be selected with the ctrl or shift keys.</li>
          <li>The raw data for a graph is viewable in the "Table" tab.</li>
          <li>The reset button unchecks all selected options. </li>
        </ul>
      </div>
    </div>

  </header>

<!--
<div id="header">

<div id="headerLeft" onclick="javascript:treeReset();" style="cursor:pointer;">
WebM Dashboard
</div>

<div id="headerRight">

<a href="#null" id="resetbutton" style="display:table-cell; vertical-align: middle;">
Reset
</a>
&nbsp;|&nbsp;


<div id="helpdialog" title="About this page">
<ul>
<li>To view a graph of performance data, please select some metrics, configurations, filesets and patch sets. </li>
<li> The page will automatically update to reflect what data is available.</li>
<li> Then in the area below, pick a filename to view the graph.</li>
<li> Multiple filenames can be selected with the ctrl or shift keys.</li>
<li>The raw data for a graph is viewable in the "Table" tab.</li>
<li>The reset button unchecks all selected options. </li>
</ul>
</div>
<a href="#null" id="helpbutton" style="display:table-cell; vertical-align: middle;">
Help
</a>
&nbsp;|&nbsp;
-->

<div id="sharedialog" title="Share this view">
To share the current view with someone else, use this custom url below:
<div id="shareurl">
</div>
</div>

<!--
<a href="#null" id="sharebutton" style="display:table-cell; vertical-align: middle;">
Share
</a>


</div>

</div>
-->

    <div class="container-fluid">

      <div class="row-fluid" id="">
        <div class="span6">
          <h3>Explorer View</h3>
        </div>
        <div class="span6">
          <a href="#null" id="resetbutton" class="btn pull-right" style="margin-left: 1em;">Reset</a>
          <a href="#null" id="sharebutton" class="btn pull-right">Share</a>
        </div>
      </div>

      <div class="row-fluid" id="upper">

        <div class="span2 border-right">
          <h3>
              Metrics
          </h3>
          <!-- div rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title" style="float: right;">?</div -->
          <div id="treeView1"></div>
        </div>

        <div class="span2 border-right">
          <h3>Configs</h3>
          <div id="treeView2"></div>
        </div>

        <div class="span2 border-right">
          <h3>File Sets</h3>
          <div id="treeView3"></div>
        </div>

        <div class="span6">
          <h3>Patch Sets</h3>
          <div id="treeView4"></div>
        </div>

      </div><!-- End row -->

      <div class="row-fluid" id="middle">

        <ul id="myTab" class="nav nav-tabs">
          <li class="active">
            <a href="#graph" data-toggle="tab">Graph</a>
          </li>
          <li>
            <a href="#table" data-toggle="tab">Table</a>
          </li>
          <li>
            <a href="#commit-history" data-toggle="tab">Commit History</a>
          </li>
        </ul>

        <div id="myTabContent" class="tab-content">

          <div class="tab-pane fade in active" id="graph">
            <div class="span3">
              <div id="tabs11"></div>
            </div>

            <div class="span9">
              <div id="chartdiv"></div>
              <div id="status"> </div>
            </div>
          </div>

          <div class="tab-pane fade" id="table">
            <div id="tabs2" class="tabdiv"></div>
          </div>

          <div class="tab-pane fade" id="commit-history">
            <div class="ui-widget-content" id="githistory"></div>
          </div>

        </div>

      </div><!-- End row -->

{% include "templates/footer.html" %}

    </div><!-- End container -->

<div id="bottomcenter">

<div id="commitInfo" title="Commit Information"> </div>
<div id="configInfo" title="Configuration Information"> </div>

<!-- the tab widget
<div id="tabs">
  <ul class="tabnav">
    <li><a href="#tabs1">Graph</a></li>
    <li><a href="#tabs2">Table</a></li>
    <li><a href="#tabs3">Commit History</a></li>
  </ul>

  <div id="tabs1" class="tabdiv">
    <div>
    </div>
    <div class="clear"></div>

  </div>

  <div id="tabs3" class="tabdiv">

  </div>

</div> -->
</div> <!-- end of bottom center -->
<!--
<div class="clear"></div>
<div id="footer">
<a href="http://webmproject.org" target="_blank"> The WebM Project </a>
</div> -->

<script src="/js/bootstrap.min.js"></script>

</body>
</html>
